<template>
<div :class="[$style.container]">
  <div :class="[$style.content]">
    <div :class="[$style.progress]" v-if="submitting">
      <div class="ft-64"><i class="el-icon-loading"></i></div>
      <div>认证中,请稍后...</div>
    </div>
    <div :class="[$style.error]" v-if="hasError">
      <div class="text-error ft-64"><i class="el-icon-warning"></i></div>
      <div>
        <div>认证出错!</div>
        <div class="mt-3 ft-sm" v-if="errMsg">{{errMsg}}</div>
      </div>
      <div class="mt-4"><el-button size="small" class="px-5" @click="onBack">返 回</el-button></div>
    </div>
    <div :class="[$style.success]" v-if="success">
      <div class="text-success ft-64"><i class="el-icon-success"></i></div>
      <div>认证成功！正在跳转...</div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { bindDingtalkToCurrent, bindWecomToCurrent } from '@/api/account'
import { Component, Prop, Provide, Ref, Vue } from 'vue-property-decorator'

@Component
export default class AfterAuthorize extends Vue {
  @Prop(String) type!: 'ding_talk' | 'wecom'

  @Prop(String) returnUrl!: string

  @Prop(String) action!: 'login' | 'bind'

  @Prop(String) code!: string

  submitting = false

  hasError = false

  success = false

  errMsg = ''

  onLogin () {
    const req = {
      identifier: this.code,
      credential: this.code,
      type: this.type
    }
    this.submitting = true
    this.$auth.login(req as any).finally(() => {
      // location.replace(this.returnUrl ? decodeURIComponent(this.returnUrl) : '/')
      this.success = true
      this.hasError = false
    }).catch((e) => {
      this.hasError = true
      this.errMsg = e?.data?.message || ''
      this.success = false
    }).finally(() => {
      this.submitting = false
    })
  }

  onBind () {
    if (this.type === 'ding_talk') {
      this.submitting = true
      bindDingtalkToCurrent(this.code).then(data => {
        this.success = true
        this.hasError = false
        location.replace(this.returnUrl ? decodeURIComponent(this.returnUrl) : '/')
      }).catch(e => {
        this.hasError = true
        this.errMsg = e?.data?.message || ''
        this.success = false
      }).finally(() => {
        this.submitting = false
      })
    } else if (this.type === 'wecom') {
      this.submitting = true
      bindWecomToCurrent(this.code).then(data => {
        this.success = true
        this.hasError = false
        location.replace(this.returnUrl ? decodeURIComponent(this.returnUrl) : '/')
      }).catch(e => {
        this.hasError = true
        this.errMsg = e?.data?.message || ''
        this.success = false
      }).finally(() => {
        this.submitting = false
      })
    }
  }

  onBack () {
    history.go(-1)
  }

  mounted () {
    if (this.action === 'login') {
      this.onLogin()
    } else if (this.action === 'bind') {
      this.onBind()
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 35vw;
  min-width: 480px;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 0 2px rgb(0 0 0 / 10%);
}

.progress {
  margin: 24px 0;
  text-align: center;
  font-size: 24px;
  color: $color-primary;
}

.error {
  margin: 24px 0;
  text-align: center;
  font-size: 24px;
  color: $color-error;
}

.success {
  margin: 24px 0;
  text-align: center;
  font-size: 24px;
  color: $color-success;
}

</style>
